<template>
  <div class="divCheckListAdd box contenBox">
    <!-- <el-tabs
      v-model="activeName"
      type="card"
    >
      <el-tab-pane
        label="基础信息"
        name="first"
      >
        <base-info @getid="getId"></base-info>
      </el-tab-pane>
      <el-tab-pane
        label="分配库位"
        name="second"
      >
        <distribution-location ref="location" :ownerId="ownerId"></distribution-location>
      </el-tab-pane>
    </el-tabs> -->
    <div class="divSteps">
      <el-steps
        :active="activeStep"
        finish-status="success"
      >
        <el-step title="基础信息"></el-step>
        <el-step title="分配库位"></el-step>
      </el-steps>
    </div>
    <!-- 基础信息 -->
    <base-info
      v-if="activeStep === 0"
      ref="baseInfo"
      :formData="formData"
      @getid="getId"
      @getvalue="getValue"
    ></base-info>
    <!-- end -->
    <!-- 承运商信息 -->
    <distribution-location
      v-if="activeStep === 1"
      ref="location"
      :ownerId="ownerId"
    ></distribution-location>
    <!-- end -->
    <div class="buttonBox">
      <base-button
        v-if="activeStep === 0"
        class="unimportanceButton btnReturn"
        @click="handleSubmit"
      >返回</base-button>
      <base-button
        v-if="activeStep === 1"
        class="unimportanceButton"
        @click="handlePrevStep"
      >上一步</base-button>
      <base-button
        v-if="activeStep === 0"
        class="minorImportantButton"
        @click="handleNextStep"
      >下一步</base-button>
      <base-button
        v-if="activeStep === 1"
        class="minorImportantButton"
        @click="handleSubmit"
      >提交</base-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { getLocationData } from '@/utils/common-utils'
// 关闭窗口
import SinglePage from '@/mixin/single-page'
// interface接口
import { ICommonReturn } from '@/utils/common-interface'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// 基础信息
import BaseInfo from './components/baseInfo.vue'
// 分配库位
import DistributionLocation from './components/location.vue'
// api
import {
  addOwner,
  updateOwner,
  getListDetails
} from '@/module-business/api/owner'
import { generateWarehouseCode } from '@/api/common-api'
@Component({
  name: 'OwnerAdd',
  components: {
    BaseButton,
    BaseInfo,
    DistributionLocation
  }
})
export default class extends mixins(SinglePage) {
  private activeStep = 0 // 2表示流程结束
  private ref: any = this.$refs
  private activeName = 'first'
  private ownerId = ''
  private formData = {
    id: '',
    code: '', // 编码
    name: '', // 名字
    personName: '', // 联系人
    phone: '', // 联系人电话
    email: '', // 邮箱
    location: '', // 省/市/区
    province: '',
    city: '',
    area: ''
  }

  mounted() {
    this.initData()
  }

  private async initData() {
    this.formData.id = this.$route.params.id
    this.getListDetails()
    const { data } = await generateWarehouseCode('HZ')
    if (this.formData.code === '') {
      this.formData.code = data
    }
  }

  // 获取详情
  private async getListDetails() {
    const id = this.formData.id
    if (id !== 'null') {
      const { data } = await getListDetails(id)
      this.ownerId = id
      this.formData = {
        ...data,
        location: [data.province, data.city, data.area]
      }
    }
  }

  // 获取货主id
  getId(val: any) {
    this.ownerId = val
  }

  // 获取下一步
  getValue(val: any) {
    this.activeStep = val
  }

  // 上一步
  private handlePrevStep() {
    if (this.activeStep-- > 2) {
      this.activeStep = 0
    }
  }

  // 下一步
  private async handleNextStep() {
    if (this.activeStep === 0) {
      this.ref.baseInfo.handleSave()
    }
    if (this.activeStep === 1) {
      const form: any = this.formData
      const params = {
        ...form,
        location: getLocationData(form.location.join('/')),
        province: form.location[0],
        city: form.location[1],
        area: form.location[2]
      }
      let data: ICommonReturn
      if (this.formData.id === 'null' || this.formData.id === undefined) {
        // 新增操作
        data = ((await addOwner(params)) as unknown) as ICommonReturn
      } else {
        // 编辑
        data = ((await updateOwner(params)) as unknown) as ICommonReturn
      }
      this.ownerId = this.formData.id = (data.data as any).id
      if (data.code === 0) {
        this.$message({
          showClose: true,
          message: '恭喜你，提交成功！',
          type: 'success'
        })
        // this.closeWindow()
      } else {
        this.$message({
          showClose: true,
          message: data.msg,
          type: 'error'
        })
      }
    }
  }

  // 保存关闭
  private handleSubmit() {
    this.closeWindow()
  }
}
</script>
<style lang="scss" scoped>
.divCheckListAdd {
  .divSteps {
    width: 600px;
    margin: 0 auto;
    height: 100px;
    margin-top: 56px;
  }
}
</style>
